<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fa/css/all.css">
    <link rel="stylesheet" href="./css/css.css">
</head>

<body>
    <div class="wrap">
        <div class="hd">
            <div class="search">
                <i class="fa fa-search"></i>
                <input type="text" id="J_kw">
            </div>
            <div class="tar J_tar">
                <div class="item cur" data-filed="all">
                    <a href="javascript:;" class="lk">全部课程</a>
                </div>
                <div class="item" data-filed="free">
                    <a href="javascript:;" class="lk">免费课程</a>
                </div>
                <div class="item" data-filed="vip">
                    <a href="javascript:;" class="lk">VIP课程</a>
                </div>
            </div>
            <div class="page J_page">
    
            </div>
        </div>
    </div>
    <div id="data" style="display: none;">
        [{"id":"1","course":"前端开发之企业级深度JavaScript特训课","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"2","course":"WEB前端工程师就业班之深度JSDOM+讲师辅导-第3期","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
        {"id":"3","course":"前端开发之企业级深度HTML特训课","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"4","course":"前端开发之企业级深度CSS特训课","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id":"5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
        {"id":"6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
        {"id":"7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}]
    </div>
    <script type="text/html" id="tpl">
        <div class="item">
            <div class="img">
                <img src="./img/{{img}}" alt="">
            </div>
            <div class="info">
                <h5>{{course}}</h5>
                <p>{{teacher}}老师</p>
                <p>{{classes}}课时 <span class="{{style}}">{{is_free}}</span></p>
            </div>
        </div>
    </script>
    <script src="../../js/tools.js"></script>
    <script src="./js/index.js"></script>
</body>

</html>